<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<script src="js/mui.min.js"></script>
	<link href="css/mui.min.css" rel="stylesheet"/>

	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;

		}
		#top{
			background-color:#23CAD0;
		}
		#top #back{
			color: white;
			display: inline-block;
		}
		#top #title{
			color: white;
			font-family: "微软雅黑";
		}
		#order{
			height:90px;
			width:411px;
			border:1px #EDEDED solid;
			background-color: white;
		}
		#order #back{
			color: black;
			display: inline-block;
			margin-top:50px;
			padding-left:10px;
		}
		#order #title{
			margin: auto;
			margin-top:-30px;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order2{
			height:40px;
			width:411px;
			border:1px #EDEDED solid;
			background-color: #F7F7F7;
			padding-top:0px;
		}
		#order2 #title{
			margin-left:13px;
			text-align: left;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order3{
			height:55px;
			width:411px;
			border:1px #F8F8F8 solid;
			background-color: #FFFFFF;
		}
		#order3 #title1{
			margin-top:7px;
			margin-left:13px;
			text-align: left;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order3 #title2{
			margin-top:7px;
			text-align: right;
			font-size:15px;
			color: black;
			font-family: "微软雅黑";
		}
		#order3 #title2 span{
			font-size: 30px;
			color: #F79252;
			padding-left: -40px;
		}
		#order4{
			height:40px;
			width:411px;
			border:1px #F8F8F8 solid;
			background-color: #FFFFFF;
		}
		#order4 #title1{
			margin-top:-15px;
			margin-left:5px;
			text-align: left;
			padding-top:15px;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order4 #title2{
			margin-top: -15px;
			margin-left:-50px;
			text-align: right;
			padding-top: 15px;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#adress{
			padding-top: 10px;
		}
		#order4 span{
			display: inline-block;

		}


		#order5{
			height:40px;
			width:411px;
			border:1px #F8F8F8 solid;
			background-color: #FFFFFF;
		}
		#order5 #title1{
			margin-top:-15px;
			margin-left:5px;
			text-align: left;
			padding-top: 15px;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order5 #title2{
			margin-top: -15px;
			margin-left:-50px;
			text-align: right;
			padding-top: 15px;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#time{
			padding-top: 10px;
		}
		#order5 span{
			display: inline-block;
		}

		#order6{
			height:40px;
			width:411px;
			border:1px #EDEDED solid;
			background-color: #F7F7F7;
			padding-top:2px;
		}
		#order6 #title{
			margin-left:13px;
			text-align: left;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order7{
			height:180px;
			width:411px;
			border:1px #F8F8F8 solid;
			background-color: #FFFFFF;
		}
		#order7 #shu{
			margin-top: 10px;
			background-color:#E9FBFB;
			height:70px;
			width:85%;
			margin-left:16px;

		}
		#order7 #shu span{
			display: inline-block;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";

		}
		#order7 #shu #title1{
			text-align: left;
			padding-left: 15px;
		}
		#order7 #shu #title2{
			padding-top:30px;
			text-align: left;
			padding-left: 15px;
		}
		#order7 #shu #title3{
			font-size:18px;
			color: #F79252;
			padding-left:200px;
			padding-top:15px;
		}
		#order8{
			margin-bottom:10px;
		}
		#order8 span{
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
			display: inline-block;
		}
		#order8 #title1{
			padding-top:20px;
			padding-left:25px;
			padding-right:40px;
		}
		#order8 #title2{
			padding-bottom:0px;
			padding-left:50px;

		}
		#order8 #title3{
			padding-left:70px;
		}
		#hm                                                                          {
			padding: 0px;
			margin: 0px;
			width:85%;
			margin:0px auto;
		}
		#order9 span{
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
			display: inline-block;
		}
		#order9 #title1{
			padding-top:15px;
			padding-left:25px;
			padding-right:40px;
		}
		#order9 #title2{
			padding-bottom:0px;
			padding-left:40px;

		}
		#order9 #title3{
			padding-left:47px;
		}
		#order10{
			height:50px;
			width:411px;
			border:1px #EDEDED solid;
			background-color: #F7F7F7;
			padding-top:5px;

		}
		#order10 #title{
			text-align: left;
			padding-left: 35px;
			font-size:16px;
			color: black;
			font-family: "微软雅黑";
		}
		#order11{
			height:50px;
			width:90%;
			margin:0px auto;
			border:1px #F8F8F8 solid;
			background-color:#23CAD0;

		}
		#order11 #title{
			text-align: center;
			font-size: 25px;
		}

	</style>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
	<!-- 主页面容器 -->
	<!--头部-->
	<div class="mui-inner-wrap">
		<!-- 菜单容器 -->


		<!-- 主页面标题 -->
		<header class="mui-bar mui-bar-nav" id="top">
			<a href="#" class="mui-icon mui-icon-arrowleft" id="back"></a>
			<h1 class="mui-title" id="title">袋鼠捎货</h1>
		</header>
		<section class="mui-scroll-wrapper">
			<div class="myorder1" id="order">
				<a href="#" class="mui-icon mui-icon-arrowleft" id="back"></a>
				<h1 class="mui-title" id="title">订单详情</h1>
			</div>
			<div class="myorder2" id="order2">
				<h1 class="mui-title" id="title">订单号:345655256585</h1>
			</div>
			<div class="myorder3" id="order3">
				<h1 class="mui-title" id="title1">货品共计7箱，总重120kg</h1>
				<h1 class="mui-title" id="title2">|      配送费      <span>25元</span></h1>
			</div>
			<div class="myorder4" id="order4">
				<span class="mui-icon mui-icon-location" id="adress"></span>
				<span class="mui-title" id="title1">收货地址:</span>
				<span class="mui-title" id="title2">郑州市金水区绿地峰会天下1004</span>
			</div>
			<div class="myorder5" id="order5">
				<span class="mui-icon mui-icon-minus" id="time"></span>
				<span class="mui-title" id="title1">收货时间:</span>
				<span class="mui-title" id="title2">明天(周三)15:30送达</span>
			</div>
			<div class="myorder6" id="order6">
				<h1 class="mui-title" id="title">货品清单</h1>
			</div>
			<div class="myorder7" id="order7">
				<div id="shu">
					<span class="mui-title" id="title1">万邦物流园,蔬菜区</span>
					<span class="mui-title" id="title2">李先生 136*******876</span>
					<span class="mui-title" id="title3">A区10号档口</span>

				</div>

				<div id="order8">
					<span id="title1">富士苹果</span>
					<span id="title2">2箱</span>
					<span id="title3">25kg</span>
				</div>
				<hr id="hm"/>
				<div id="order9">
					<span id="title1">南阳水品香梨</span>
					<span id="title2">5箱</span>
					<span id="title3">95kg</span>
				</div>
			</div>
			<div class="myorder10" id="order10">
				<h1 class="mui-title" id="title">备注：麻烦师傅了</h1>
			</div>
			<div class="myorder11" id="order11">
				<h1 class="mui-title" id="title">接单</h1>
			</div>
		</section>


	</div>


</div>

</body>
</html>